<template>
	<view class="page-content">
		<view class="form-warp m-md">
			<form @submit="bind">
				<view class="form-warp_item p-md radius-25" v-if="userInfo.mobile">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="smartphone-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="number" name="old_mobile" :placeholder="$t('bind_phone.old_mobile-placeholder')" class="input text-md"/>
						</view>
						
					</view>
				</view>
				
				<view class="form-warp_item p-md radius-25 m-t-md">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="smartphone-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline ">
							<input type="number" name="mobile" :placeholder="$t('bind_phone.mobile-placeholder')" v-model="mobile" class="input text-md"/>
						</view>
						<u-transition class="form-warp_item-btn flex-center p-l-sm p-r-sm" :show="true" v-if="configInfo.user_verification == 1 && mobile">
							<text class="text-xs text-danger" @click="smsBtnClick">{{!isGetSms ? $t('smscode.get') : $t('smscode.write')}}</text>
						</u-transition>
					</view>
				</view>
				<view class="form-warp_btns m-t-md">
					<u-button formType="submit" size="large" class="form-warp_btns-btn" shape="circle" :text="userInfo.mobile ? $t('bind_phone.edit-btn') :$t('bind_phone.bind-btn')" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor,'font-size':'25px'}" :loading="sumbitLoading" loadingText=" " :disabled="sumbitLoading"></u-button>
				</view>
				
			</form>
		</view>
		
		<m-modal
			:show="smsCodeShow"
			:title="$t('smscode.modal-title')"
			:btn="$t('smscode.modal-btn')"
			@close="closeSmsCodeModal"
			@btnComplete="smsCodeShow = false"
		>
			<view class="p-t-md p-b-md m-md">
				<u-code-input v-model="smsCode" :maxlength="6"></u-code-input>
				<view class="text-center m-t-md" v-if="isGetSms">
					<u-count-down
						:time="smsCodeTime * 1000"
						format="ss"
						autoStart
						millisecond
						@change="smsCodeOnChange"
						@finish="smsCodeFinish"
						v-if="smsCodeStarDown"
					>
						<view class="flex-center text-sm text-warning">
							{{$util.handleStr($t('smscode.count-down'),smsCodeTimeData.seconds)}}
						</view>
					</u-count-down>
					<m-icon class="text-sm text-danger" name="refresh-line" :text="$t('smscode.retrieve')" @click="getSmsCode" v-if="!smsCodeStarDown"></m-icon>
				</view>
			</view>
		</m-modal>
		
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				mobile:'', // 手机号
				smsCode:'',
				smsCodeShow:false,
				smsCodeTime:60, // 倒计时多少秒
				isGetSms:false,
				smsCodeStarDown:false,// 验证码倒计时开始
				smsCodeTimeData: {},
				sumbitLoading:false,
				smsCodeSurplusTime:0,
				scrollTop: 0,
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		onLoad(){
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getUserInfo']),
			
			async bind(e){
				this.sumbitLoading = true
				let data = e.mp.detail.value
				if(this.smsCode)data['smscode'] = this.smsCode
				let res = await this.$api.user.bindUserPhone(data)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.getUserInfo()
						thos.$util.goNavigateBack()
					})
				}
				this.sumbitLoading = false
			},
			
			// 获取验证码
			smsBtnClick(){
				if(!this.isGetSms){
					this.getSmsCode()
				}else{
					this.smsCodeShow = true
				}
			},
			
			// 获取验证码
			async getSmsCode(){
				this.$util.showLoading(this.$t('smscode.loading'))
				let data = {
					mobile:this.mobile
				}
				let res = await this.$api.user.getSms(data)
				if(res.code == 200){
					this.$util.showToast(this.$t('smscode.success'))
					this.isGetSms = true
					this.smsCodeStarDown = true
					this.smsCodeTime = 60
					this.smsCodeShow = true
					this.$util.hideAll()
				}
			},
			
			// 验证码倒计时
            smsCodeOnChange(e) {
                this.smsCodeTimeData = e
				this.smsCodeSurplusTime = e.seconds
            },
			
			// 验证码倒计时结束
			smsCodeFinish(){
				this.smsCodeStarDown = false
			},
			
			// 关闭验证码输入框
			closeSmsCodeModal(){
				this.smsCodeShow = false
				this.smsCodeTime = this.smsCodeSurplusTime
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.form-warp{
		&_item{
			margin-top: 50rpx!important;
			background-color: #fff;
		}
		&_btns{
			margin-top: 50rpx!important;
		}
		&_btns-btn{
			font-size: 13px!important;
		}
	}
</style>